<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    {{name}}

    <!--事件的绑定
    -使用v-on:xxx绑定事件 xxx表示的是事件名
    简写：@事件名="函数"
    -->
    <button v-on:click="show1()">点我提示信息</button>
    <!--省略括号 但是如果需要传参必须带括号-->
    <button v-on:click="show1">点我提示信息</button>
    <!--绑定事件的简写-->
    <button @click="show2">点我提示信息2</button>
    <!--为函数传参 $event当前触发事件的源对象 -->
    <button @click="show3($event,666)">传参</button>


</div>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                name:'zs'
            }
        },
        methods:{//表示的是Vue用来定义函数的位置
            //定义第一个函数
           show1() {
               alert("你好");
           },
            show2(){
               alert("你不好！");
            },
            show3(event,num){
                console.log(event,num);
                //获得被点击对象的目标对象的内部html
                console.log(event.target.innerText);
                console.log(this);//this还是vm mthods中的函数也会出现在vm上
            }
        }
    });
</script>

</body>
</html>